<template>
	<view @click="goZb">
		<view style="width: 100vw;height: 35vh;display: flex;">
			<view style="width: 50vw;height: 35vh;">
				<image src="/static/images/Lzb1.png" style="width: 47vw;margin-left: 1vw;height: 35vh;" mode=""></image>
			</view>
			<view style="width: 50vw;">
				<view style="width: 50vw;height: 17vh;">
					<image src="/static/images/Lzb2.png" style="width: 48vw;height: 17vh;" mode=""></image>
				</view>
				<view style="width: 50vw;height: 17vh;">
					<image src="/static/images/Lzb2.png" style="width: 48vw;height: 17vh;" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 第二行 -->
		<view style="width: 100vw;height: 15vh;margin-top: 1vh;display: flex;">
			<view style="width: 50vw;height: 15vh;">
				<image src="/static/images/Lzb3.png" style="width: 47vw;margin-left: 1vh;height: 15vh;" mode=""></image>
			</view>
			<view style="width: 50vw;height: 15vh;">
				<image src="/static/images/Lzb4.png" style="width: 47vw;margin-left: 1vh;height: 15vh;" mode=""></image>
			</view>
		</view>
		<!-- 第三行 -->
		<view style="width: 100vw;height: 35vh;margin-top: 1vh;display: flex;flex-wrap: wrap;">
			<!-- 商品渲染 -->
			<view style="width: 48vw;margin-left: 2vw;height: 35vh;background-color: #fff;border-radius: 10px;"
				v-for="(item,index) in list" :key="index">
				<view style="width: 40vw;height: 25vh;">
					<image :src="item.img" style="width: 48vw;height: 25vh;" mode=""></image>
				</view>
				<!-- 正在直播 -->
				<view style="width: 48vw;display: flex;margin-top: 1vh;display: flex;font-size: 0.5rem;height: 5vh;  ">
					<view
						style="width: 15vw;height: 3vh;background-color: #D71A43;border-radius: 5px;color: #fff;font-size: 0.5rem;view-align: center;line-height: 3vh;">
						正在直播</view>
					<view style="width: 32vw;overflow: hidden;">{{item.title}}</view>
				</view>
				<!-- 价格 -->
				<view style="width: 100vw;display: flex;">
					<view style="font-size: 0.9rem;font-weight: bold; color: #D57D52;">￥{{item.price}}</view>
					<text style="font-size: 0.5rem;color: #999;">{{item.fkNum}}人付款</text>
				</view>
			</view>
		</view>
		
		<view style="width: 100vw;display: flex;">
		
		<!-- 新的 -->
		<view
			style="width: 48vw;margin-left: 2vw;height: 35vh;background-color: #007AFF; margin-top: 1vh;background-color: #fff;border-radius: 10px;">
			<view style="font-size: 0.5rem;color: red;height: 3vh;line-height: 3vh;padding-left: 3vw;">新品推荐</view>
			<view
				style="display: flex;flex-wrap: wrap; width: 48vw;background-color: #007AFF;background-color: #fff;border-radius: 10px;">
				<view style="width: 23vw;margin-left: 1vw;height:10vh;margin-top: 1vh;" v-for="(item,index) in Xiaolist"
					:key="index">
					<view style="width: 23vw;height: 6vh;">
						<image :src="item.img" style="width: 18vw;height: 6vh;margin-left: 2vw;" mode=""></image>
					</view>
					<view style="width: 23vw;height: 4vh;line-height: 4vh;font-size: 0.6rem;text-align: center;">新品格子衫
					</view>
				</view>
			</view>
		</view>
	
		<!-- 第三行 -->
		<view style="width: 100vw;height: 35vh;margin-top: 1vh;display: flex;flex-wrap: wrap;">
			<!-- 商品渲染 -->
			<view style="width: 48vw;margin-left: 2vw;height: 35vh;background-color: #fff;border-radius: 10px;">
				<view style="width: 40vw;height: 25vh;">
					<image src="/static/images/LxiaoIMG.png" style="width: 48vw;height: 25vh;" mode=""></image>
				</view>
				<!-- 正在直播 -->
				<view style="width: 48vw;display: flex;margin-top: 1vh;display: flex;font-size: 0.5rem;height: 5vh;  ">
					<view
						style="width: 15vw;height: 3vh;background-color: #D71A43;border-radius: 5px;color: #fff;font-size: 0.5rem;view-align: center;line-height: 3vh;">
						正在直播</view>
					<view style="width: 32vw;overflow: hidden;">法式连衣裙外套外套女女外水电费第三方的套改水电防守打法的烦都烦死迭代算法费</view>
				</view>
				<!-- 价格 -->
				<view style="width: 100vw;display: flex;">
					<view style="font-size: 0.9rem;font-weight: bold; color: #D57D52;">￥215</view>
					<text style="font-size: 0.5rem;color: #999;">3人付款</text>
				</view>
			</view>
			</view>
			
			
		</view>
		
		<!-- 第三行 -->
		<view style="width: 100vw;height: 35vh;margin-top: 1vh;display: flex;flex-wrap: wrap;">
			<!-- 商品渲染 -->
			<view style="width: 48vw;margin-left: 2vw;height: 35vh;background-color: #fff;border-radius: 10px;"
				v-for="(item,index) in list" :key="index">
				<view style="width: 40vw;height: 25vh;">
					<image :src="item.img" style="width: 48vw;height: 25vh;" mode=""></image>
				</view>
				<!-- 正在直播 -->
				<view style="width: 48vw;display: flex;margin-top: 1vh;display: flex;font-size: 0.5rem;height: 5vh;  ">
					<view
						style="width: 15vw;height: 3vh;background-color: #D71A43;border-radius: 5px;color: #fff;font-size: 0.5rem;view-align: center;line-height: 3vh;">
						正在直播</view>
					<view style="width: 32vw;overflow: hidden;">{{item.title}}</view>
				</view>
				<!-- 价格 -->
				<view style="width: 100vw;display: flex;">
					<view style="font-size: 0.9rem;font-weight: bold; color: #D57D52;">￥{{item.price}}</view>
					<text style="font-size: 0.5rem;color: #999;">{{item.fkNum}}人付款</text>
				</view>
			</view>
		</view>




	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						img: '/static/images/Lzb5.png',
						title: '法式连衣裙外套外套女女外水电费第三方的套改水电防守打法的烦都烦死迭代算法费',
						price: '198',
						fkNum: 71
					},
					{
						img: '/static/images/Lzb5.png',
						title: '法式连衣裙外套外套女女外水电费第三方的套改水电防守打法的烦都烦死迭代算法费',
						price: '154',
						fkNum: 71
					}
				],
				Xiaolist: [{
						img: '/static/images/LxiaoIMG.png',
						title: '小格子衫'
					},
					{
						img: '/static/images/LxiaoIMG.png',
						title: '小格子衫'
					},
					{
						img: '/static/images/LxiaoIMG.png',
						title: '小格子衫'
					},
					{
						img: '/static/images/LxiaoIMG.png',
						title: '小格子衫'
					},
				]
			}
		},
		methods: {
				goZb(){
					uni.navigateTo({
						url:'./stream'
					})
				}
		}
	}
</script>

<style>

</style>
